﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Clothes.UI.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            添加服装
            上传图片：
           <div id="uploadselect" class="uploadselect">
                <input type="file" id="upload" class="upload" accept="image/*" />
            </div>
              <asp:HiddenField ID="hfAvatar" runat="server" />
            <br />
            简介
            <asp:TextBox ID="txt_jian" runat="server" TextMode="MultiLine"></asp:TextBox>
            <br />
            服装类别
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
            <br />
            服装件数
            <asp:TextBox ID="txt_shu" runat="server"></asp:TextBox>
            <br />
            售价：
            <asp:TextBox ID="txt_shou" runat="server"></asp:TextBox>
            <br />
            金额：
            <asp:TextBox ID="txt_jing" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </div>
    </form>
</body>
    <script src="lib/lrz/dist/lrz.bundle.js"></script>
    <script>
        document.querySelector('#upload').addEventListener('change', function () {
            lrz(this.files[0], { width: 300, height: 300 })
                .then(function (rst) {
                    // 上传文件数据
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', 'YiBanChuLi/ImageUploadHandler.ashx?length=' + rst.base64Len);
                    // onload请求成功获取数据成功
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            document.getElementById('BodyContent_hfAvatar').value = xhr.responseText;
                        } else {
                            alert('图片上传失败！');
                        }
                    };
                    //send[send] （森的）()方法，发送具体请求
                    xhr.send(rst.base64);
                    // 在页面中显示图片
                    var img = new Image();
                    img.src = rst.base64;
                    img.width = 100;
                    img.height = 100;
                    document.getElementById('uploadselect').parentNode.appendChild(img);
                    document.getElementById('uploadselect').remove();
                    // 返回对象
                    return rst;
                })
                .catch(function (err) {
                    console.log(err);
                    alert('图片上传失败！');
                });
        });
    </script>
</html>
